<template>
	<view class="page">
		<view class="header-line">个人中心</view>
		<view class="main-content">
			<view class="profile-card">
				<view class="header" @click="navigateToNextPage('/pages/mypage/mypage')">
					<view class="user-info">
						<view class="avatar" :style="`--icon: url(${ userIcon })`"></view>
						<view class="info">
							<view class="name">{{ username }}</view>
							<view class="school">{{ college ? college : '暂无填写学校' }}</view>
						</view>
					</view>
					<view class="edit-btn">
						<view class="icon" :style="`--icon: url(${ base_url }/static/img/bianji.svg)`"></view>
						<view class="text">编辑资料</view>
					</view>
				</view>
				<view class="stats">
					<view class="stat-item" @click="navigateToNextPage('/pages/checkInCalendar/checkInCalendar')">
						<view class="stat-value">{{ total_duration ? total_duration : 0 }}min</view>
						<view class="stat-label">专注时长</view>
					</view>
					<view class="stat-item" @click="navigateToNextPage('/pages/applicationsList/applicationsList')">
						<view class="stat-value">{{ resume_submission_count ? resume_submission_count : 0 }}</view>
						<view class="stat-label">投递数</view>
					</view>
					<view class="stat-item" @click="navigateToNextPage('/pages/myFavoriteJobs/myFavoriteJobs')">
						<view class="stat-value">{{ favorite_count ? favorite_count : 0 }}</view>
						<view class="stat-label">收藏数</view>
					</view>
				</view>
				<view class="tags">
					<view class="tag-group">
						<view class="tag-icon" :style="`--icon: url(${ base_url }/static/img/gongwenbao.svg)`"></view>
						<view class="tag-text">{{ major ? major : '暂无专业信息' }}</view>
					</view>
					<view class="tag-group">
						<view class="tag-icon" :style="`--icon: url(${ base_url }/static/img/nianji.svg)`"></view>
						<view class="tag-text">{{ level ? level : "暂无年级信息" }}</view>
					</view>
					<!-- <view class="tag-group">
						<view class="tag-icon" :style="`--icon: url(${ base_url }/static/img/weizhi.svg)`"></view>
						<view class="tag-text">广东</view>
					</view> -->
				</view>
				<view class="bio">{{ bio }}</view>
			</view>
			<view class="profile-menu">
				<view class="menu-group">
					<view class="group-title">我的档案</view>
					<view class="menu-items">
						<view class="menu-item" @click="navigateToNextPage('/pages/myResume/myResume')">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/gerenjianli.svg)`"></view>
								<view class="item-label">个人简历</view>
							</view>
							<view class="item-right"></view>
						</view>
						<!-- <view class="menu-item">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/aixin.svg)`"></view>
								<view class="item-label">求职意向</view>
							</view>
							<view class="item-right"></view>
						</view> -->
						<view class="menu-item" @click="navigateToNextPage('/pages/applicationsList/applicationsList')">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/qiuzhijindu.svg)`"></view>
								<view class="item-label">求职进度</view>
							</view>
							<view class="item-right" v-if="resume_submission_count">
								<view class="item-value">{{ resume_submission_count ? resume_submission_count : 0 }}个在投</view>
							</view>
						</view>
					</view>
				</view>
				<view class="menu-group">
					<h3 class="group-title">消息中心</h3>
					<view class="menu-items">
						<view class="menu-item" @click="navigateToNextPage('/pages/systemNotification/systemNotification')">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/xitongtongzhi.svg)`"></view>
								<span class="item-label">系统通知</span>
							</view>
							<!-- <view class="item-right">
								<span class="item-value">2条未读</span>
							</view> -->
						</view>
						<!-- <view class="menu-item">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/huzhuxiaoxi.svg)`"></view>
								<span class="item-label">互助消息</span>
							</view>
							<view class="item-right">
								<span class="item-value">1条未读</span>
							</view>
						</view> -->
					</view>
				</view>
				<!-- <view class="menu-group">
					<h3 class="group-title">设置</h3>
					<view class="menu-items">
						<view class="menu-item">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/yinsishezhi.svg)`"></view>
								<span class="item-label">隐私设置</span>
							</view>
							<view class="item-right"></view>
						</view>
						<view class="menu-item">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/tongyongshezhi.svg)`"></view>
								<span class="item-label">通用设置</span>
							</view>
							<view class="item-right"></view>
						</view>
						<view class="menu-item">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/bangzhuhefankui.svg)`"></view>
								<span class="item-label">帮助与反馈</span>
							</view>
							<view class="item-right"></view>
						</view>
						<view class="menu-item">
							<view class="item-left">
								<view class="item-icon" :style="`--icon: url(${ base_url }/static/img/tuichudenglu.svg)`"></view>
								<span class="item-label">退出登录</span>
							</view>
							<view class="item-right"></view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
// 业务层
import { base_url } from '../../server/config';
import { getUserInfo } from '../../service/user';
import { getJobStatusData } from '../../service/job';

export default {
	data() {
		return {
			base_url,
			username: "",
			userIcon: "",
			college: "",
			total_duration: "",
			resume_submission_count: "",
			favorite_count: "",
			major: "",
			level: "",
			bio: "",
		}
	},
	methods: {
		navigateToNextPage(url) {
			uni.navigateTo({ url });
		},
	},
	onShow() {
		getUserInfo(this);
		getJobStatusData(this);
	}
}


</script>

<style>
.main-content {
	background-color: #f5f5f5;
}

.profile-card {
    background: #fff;
    border-radius: 3vmin;
	margin-top: 5vmin;
    padding: 5vmin;
    box-shadow: 0 0.5vmin 4vmin #0000000a;
}

.profile-card .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6vmin;
}

.profile-card .user-info {
    display: flex;
    gap: 4vmin;
}

.profile-card .avatar {
    width: 12vmin;
    height: 12vmin;
    border-radius: 50%;
    background-image: var(--icon);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.profile-card .info {
    display: flex;
    flex-direction: column;
    gap: 1vmin;
}

.profile-card .name {
    font-size: 5vmin;
    font-weight: 600;
    color: #333;
}

.profile-card .school {
    font-size: 3.5vmin;
    color: #666;
}

.profile-card .edit-btn {
    display: flex;
    align-items: center;
    gap: 1vmin;
    padding: 2vmin 4vmin;
    border-radius: 5vmin;
    background: #f5f5f5;
    border: none;
    transition: all .2s ease;
}

.profile-card .edit-btn .icon {
    width: 4vmin;
    height: 4vmin;
	background-image: var(--icon);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.profile-card .edit-btn .text {
	font-size: 3.5vmin;
    color: #666;
}

.profile-card .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4vmin;
    padding: 4vmin 0;
    margin-bottom: 6vmin;
    border-top: 0.25vmin solid #f0f0f0;
    border-bottom: 0.25vmin solid #f0f0f0;
}

.profile-card .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1vmin;
}

.profile-card .stat-value {
    font-size: 5vmin;
    font-weight: 600;
    color: #333;
}

.profile-card .stat-label {
    font-size: 3vmin;
    color: #999;
}

.profile-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4vmin;
    margin-bottom: 4vmin;
}

.profile-card .tag-group {
    display: flex;
    align-items: center;
    gap: 1vmin;
}

.profile-card .tag-group .tag-icon {
    width: 4vmin;
    height: 4vmin;
	background-image: var(--icon);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.profile-card .tag-group .tag-text {
    color: #666;
    font-size: 3.5vmin;
}

.profile-card .bio {
    font-size: 3.5vmin;
    line-height: 1.6;
    color: #666;
}

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 6vmin;
	margin: 6vmin 0;
}

.profile-menu .menu-group {
    background: #fff;
    border-radius: 3vmin;
    overflow: hidden;
    box-shadow: 0 0.5vmin 2vmin #0000000a;
}

.profile-menu .group-title {
    padding: 4vmin 5vmin;
    font-size: 4vmin;
    font-weight: 500;
    color: #333;
    border-bottom: 0.25vmin solid #f0f0f0;
}

.profile-menu .menu-items {
    display: flex;
    flex-direction: column;
}

.profile-menu .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4vmin 5vmin;
}

.item-left {
    display: flex;
    align-items: center;
    gap: 3vmin;
}

.item-icon {
    width: 5vmin;
    height: 5vmin;
	background-image: var(--icon);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.item-label {
    font-size: 3.5vmin;
    color: #333;
}

.item-right {
    display: flex;
    align-items: center;
    gap: 2vmin;
}

.item-value {
    font-size: 3.5vmin;
    color: #666;
}

.arrow-icon {
    width: 3vmin;
    height: 3vmin;
    background-color: #999;
}
</style>
